<template>
<div>
  <div id="main" style="width: 100%;height: 400px">

  </div>
</div>
</template>

<script>
import {getBarData} from "@/api/ech";

export default {
  data() {
    return {
      doctorLevel:[],
      doctorCount:[]
    };
  },
  comments: {},
  created() {
  },
  mounted() {
    this.getData()
  },
  methods: {
    showBar(){
      var datax = this.doctorLevel
      var datay = this.doctorCount
      var chartDom = document.getElementById('main');
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '各级别医师人数统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: datax,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: datay
          }
        ]
      };

      option && myChart.setOption(option);

    },
    async getData(){
      await getBarData().then(res=>{

        this.doctorLevel=res.data.level
        this.doctorCount=res.data.count

      }).catch(error=>{})

      this.showBar()
    }


  },
}
</script>



<style scoped>

</style>
